<template>
    <!-- 表格 -->
    <el-table :data="InfoData" class="table" height="770px" stripe border>
            <!-- 操作 -->
        <el-table-column label="操作" width="150px" align="center">
      <template #default="scope">
        <el-button size="small" type="info" @click="handleEdit(scope.$index, scope.row)">
          上传
        </el-button>
        <el-button
          size="small"
          type="primary"
          @click="handleView(scope.$index, scope.row)"
        >
          查看
        </el-button>
      </template>
    </el-table-column>

      <el-table-column prop="line" label="产线" width="100" align="center" />
      <el-table-column prop="workstation" label="工位" width="150" align="center" />
      <el-table-column prop="proSN" label="产品SN" width="200" align="center" />
      <el-table-column prop="barcode" label="阀体条码" width="200" align="center" />
      <el-table-column prop="firstRes" label="产线框图检测" width="150" align="center" />
      <el-table-column prop="firstTime" label="产线生产时间" width="200" align="center" />
      <el-table-column prop="secondRes" label="二次云判断结果" width="150" align="center" />
      <el-table-column prop="secondTime" label="二次云判断时间" width="200" align="center" />
      <el-table-column prop="filePostion" label="文件存储位置" width="1000" align="center" />
      

    </el-table>

    <!-- 上传弹窗 -->
    <el-dialog
      v-model="uploadDialogVisible"
      title="上传故障信息"
      width="60%"
    >
      <el-form :model="uploadForm" label-width="120px">
        <el-form-item label="上传实物图">
          <el-upload
            class="upload-demo"
            action=""
            :file-list="fileList1"
            list-type="picture-card"
            :auto-upload="false"
            :on-remove="handleRemove"
            :before-upload="beforeImageUpload"
          >
            <el-button size="small" type="primary">点击上传实物图</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="上传曲线图">
          <el-upload
            class="upload-demo"
            action=""
            :file-list="fileList2"
            list-type="picture-card"
            :auto-upload="false"
            :on-remove="handleRemove"
            :before-upload="beforeImageUpload"
          >
            <el-button size="small" type="primary">点击上传曲线图</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="异常原因">
          <el-input
            type="textarea"
            v-model="uploadForm.errorReason"
            placeholder="请输入异常原因"
            rows="4"
          />
        </el-form-item>
        
        <span  class="dialog-footer">
          <el-button style="margin-left: 300px;" @click="uploadDialogVisible = false">取消</el-button>
          <el-button style="margin-left: 300px;" type="primary" @click="submitUpload">提交</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!-- 查看弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="查看故障信息"
      width="60%"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <h3>实物图：</h3>
            <el-image
              v-if="viewData.physicalImage"
              :src="viewData.physicalImage"
              fit="contain"
              style="width: 100%;"
              preview
            ></el-image>
          </el-col>
          <el-col :span="12">
            <h3>曲线图：</h3>
            <el-image
              v-if="viewData.curveImage"
              :src="viewData.curveImage"
              fit="contain"
              style="width: 100%;"
              preview
            ></el-image>
          </el-col>
        </el-row>
        <h3>异常原因：</h3>
        <p>{{ viewData.errorReason }}</p>
      </div>
      <span  class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>



</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 上传表单数据
const uploadForm = ref({
  errorReason: ''
});

// 文件列表
const fileList1 = ref([]);
const fileList2 = ref([]);
const dialogVisible = ref(false);
const uploadDialogVisible = ref(false);

// 预览数据
const viewData = ref({
  physicalImage: '', // 伪数据：实际项目中应从数据库获取图片路径
  curveImage: '',    // 伪数据：实际项目中应从数据库获取图片路径
  errorReason: ''
});

// 上传按钮点击事件
const handleEdit = (index, row) => {
  // 清空文件和文本内容
  uploadForm.value.errorReason = '';
  fileList1.value = [];
  fileList2.value = [];
  uploadDialogVisible.value = true;
};

// 查看按钮点击事件
const handleView = (index, row) => {
  // 使用伪数据来模拟图片路径
    viewData.value = {
    physicalImage: '../../src/assets/实物图.png',  // 假设这是本地存储的图片路径
    curveImage: '../../src/assets/曲线图.png',
    errorReason: '阀体漏气，曲线异常'
  };
  dialogVisible.value = true;
};

// 删除文件时
const handleRemove = (file, fileList) => {
  console.log('Removed file:', file);
  console.log('File list:', fileList);
};

// 上传前验证
const beforeImageUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage.value) {
    ElMessage({message: '只能上传图片', type: 'error', })
  }
  return isImage;
};

// 提交上传的数据
const submitUpload = () => {
  // 模拟提交数据
  console.log('上传数据：', uploadForm.value);
  ElMessage({message: '上传成功', type: 'success', })
  uploadDialogVisible.value = false;
};

// 表格数据
const InfoData = ref([
  {
    line: 'XF4',
    workstation: 'ST3040XC2',
    proSN: '560220202',
    barcode: 'X7250205A4008688',
    firstRes: 'NOK',
    firstTime: '2025/02/05 23:40:27',
    secondRes: 'NOK',
    secondTime: '2025/2/5 23:42:33',
    filePostion: 'E:\\压装曲线存储W500-NCFK HMI V5.1.44\\CurveData\\[192.168.2.142]\\NOK\\2025-02-05\\XYF4_ST3040XC2__X7250205A4008688_20250205234027.csv',
  },

  {
    line: 'XYF3',
    workstation: 'ST3040YXC',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF1',
    workstation: 'TS2',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF1',
    workstation: 'TS3',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF1',
    workstation: 'XW2fg',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF5',
    workstation: 'ST10',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF5',
    workstation: 'ST3040jx',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF5',
    workstation: 'ST3040zxc',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },

  {
    line: 'XYF5',
    workstation: 'ST3040yxc',
    proSN: '560220202',
    barcode: 'GY250205B3001921',
    firstRes: 'NOK',
    firstTime: '2025/02/05 15:28:19',
    secondRes: 'NOK',
    secondTime: '2025/2/5 22:48:13',
    filePostion: 'E:\\压装曲线存储\\XYF3_ST30-40\\右行程压装\\[192.168.2.142]\\NOK\\2025-02-05\\XYF3_ST3040yxc_GY250205B3001921_20250205152819.csv',
  },
  

])



</script>

<style>
.ta{
    width: 1350px;

}

.table{
    width: 1350px;
}

</style>